<template>
	<div>
		  <div v-if="file_type == 'images'" class="image-list" style="width:100%">
			  <draggable v-model="imageList" v-bind="{group:'item'}" @change="changeSort">
				  <div v-for="(item, index) in imageList" :key="index" class="image-wrap">
					  <div class="imgStyle">
						  <img :src="item.url" /><br/>
						  <el-input size="mini" v-if="showtitle" style="width:102px; position:relative; bottom:0px;" v-model="item.name" placeholder="图片名称"></el-input>
					  </div>
					  <div class="icon-wrap">
						  <i class="el-icon-delete" @click.stop="handleRemove('images',index,item.url)"></i>&nbsp;&nbsp; 
						  <i style="cursor:pointer" :class="showtitle ? 'el-icon-top' : 'el-icon-bottom'" @click.stop="handlePictureCardPreview(index)"></i>
					  </div>
				  </div>
				  <el-upload action="#" ref="upload" class="image-uploader" :before-upload="beforeUpload" :http-request="upload" multiple>
					  <i :class="loading ? 'el-icon-loading' : 'el-icon-plus'"></i>
				  </el-upload>
			  </draggable>
		  </div>
		  <div v-else-if="file_type == 'image'" class="image-list" style="width:100%">
				<el-row v-if="upload_type == '1'">
					<div v-if="scene">
						<div class="image-wrap" v-if="siglepic">
							<div class="guigeimg">
								<img style="width:50px; height:50px;" :src="siglepic" />
							</div>
							<div class="icon-wrap-guige">
								<i class="el-icon-delete" @click.stop="handleRemove('image')"></i>
							</div>
							</div>
						<el-upload v-else action="#" ref="upload" :before-upload="beforeUpload" :http-request="upload">
							<i :class="loading ? 'el-icon-loading' : 'el-icon-plus'"></i>
						</el-upload>
					</div>
					<div v-else>
						<div class="image-wrap" v-if="siglepic">
							<div class="imgStyle">
								<img :src="siglepic" />
							</div>
							<div class="icon-wrap">
								<i class="el-icon-delete" @click.stop="handleRemove('image')"></i>
							</div>
							</div>
						<el-upload action="#" ref="upload" class="image-uploader" :before-upload="beforeUpload" :http-request="upload">
							<i :class="loading ? 'el-icon-loading' : 'el-icon-plus'"></i>
						</el-upload>
					</div>
				</el-row>
			  <el-row v-else>
				  <el-col :span="16">
					  <el-popover v-if="siglepic" placement="top" width="210" trigger="hover">
						  <img v-if="siglepic" style="max-width:200px; max-height:200px" :src="siglepic">
						  <el-input  slot="reference" @paste.native="remoteFile($event)" v-model="siglepic" autoComplete="off" clearable placeholder="请上传图片"></el-input>
					  </el-popover>
					  <el-input v-else v-model="siglepic" @paste.native="remoteFile($event)" autoComplete="off" clearable placeholder="请上传图片"></el-input>
				  </el-col>
				  <el-col :span="8">
					  <el-upload class="upload-demo" ref="upload" action="#" :before-upload="beforeUpload" :http-request="upload">
						  <el-button class="el-icon-upload" size="small" type="primary">上传图片</el-button>
					  </el-upload>
					   <el-tooltip class="item hidden-sm-and-down" effect="dark" :content="'选择图片'" placement="top">
						  <el-button class="el-icon-picture" size="small" @click="openImagesPick"></el-button>
					  </el-tooltip>
				  </el-col>
			  </el-row>
		  </div>
		  <div v-else-if="file_type == 'file'" class="image-list" style="width:100%">
			  <el-col :span="19">
				  <el-input v-model="sigleFile" autoComplete="off" clearable placeholder="请上传文件"></el-input>
			  </el-col>
			  <el-col :span="5">
				  <el-upload class="upload-demo" ref="upload" action="#" :before-upload="beforeUpload" :http-request="upload">
					  <el-button class="el-icon-upload" size="small" type="primary">点击上传</el-button>
				  </el-upload>
			  </el-col>
		  </div>
		  <div v-else class="image-list" style="width:100%">
			  <el-upload action="#" ref="upload" :before-upload="beforeUpload" :http-request="upload" multiple>
				  <el-button size="small" type="primary">点击上传</el-button>
			  </el-upload>
			  <ul class="el-upload-list el-upload-list--text">
				  <li v-for="(item,i) in fileList" :tabindex="i" :key="i" class="el-upload-list__item is-success">
					  <a @click.stop="handleRemove('files',i,item.url)" class="el-upload-list__item-name"><i class="el-icon-document"></i>{{item.name}}</a>
					  <label class="el-upload-list__item-status-label">
					  <i class="el-icon-upload-success el-icon-circle-check"></i>
					  </label>
					  <i class="el-icon-close"></i>
				  </li>
			  </ul>
		  </div>
		  <el-progress v-if="progress" :stroke-width="5" :percentage="progressPercent"></el-progress>
		  <ImagesPick :imagesDiaShow.sync="imagesDialogStatus" :siglepic.sync ="siglepic" size="small"></ImagesPick>
		  <VueCrop :cropDiaShow.sync="cropDialogStatus" :imgbase64="imgbase64" :cropFileName="cropFileName" :siglepic.sync="siglepic" :cropsize="cropsize" :rename="rename"></VueCrop>
	  </div>
  </template>
  
  <script>
  import draggable from "vuedraggable"
  import ImagesPick from '@/components/common/ImagesPick.vue'
  import COS from 'cos-js-sdk-v5'
  import VueCrop from '@/components/common/Crop.vue'
  export default {
  components: {draggable,ImagesPick,VueCrop},
  props: {
		scene:{
			type:String,
		},
	  file_ext:{
		  type:String,
	  },
	  image:{
		  type:String,
	  },
	  images: {
		  type: Array,
		  default:()=>[]
	  },
	  file:{
		  type:String,
	  },
	  files:{
		  type:Array,
		  default:()=>[]
	  },
	  upload_type:{
		  type:String,
		  default:'1',
	  },
	  file_type:{
		  type:String,
		  default: null
	  },
	  upload_config_id:{
		  type:Number,
		  default:0,
	  },
	  rename:{
		  type:String,
		  default:'1',
	  },
	  cropsize:{
		  type:String,
	  }
  },
  watch: {
	  image() {
		  this.siglepic = this.image
	  },
	  images(){
		  this.imageList = this.images
	  },
	  file(){
		  this.sigleFile = this.file
	  },
	  files(){
		  this.fileList = this.files
	  },
	  siglepic(newVal,oldVal){
		  if(oldVal && oldVal !== newVal){
			  this.deleteFile(oldVal)
		  }
		  this.$emit('update:image',this.siglepic)
	  },
	  sigleFile(newVal,oldVal){
		  if(oldVal && oldVal !== newVal){
			  this.deleteFile(oldVal)
		  }
		  this.$emit('update:file',this.sigleFile)
	  }
  },
  data() {
	  return {
		  loading: false,
		  siglepic: this.image,
		  imageList:this.images,
		  sigleFile:this.file,
		  fileList:this.files,
		  showtitle:false,
		  progressPercent:0,
		  progress:false,
		  imagesDialogStatus : false,
		  cropDialogStatus : false,
		  imgbase64:'',
		  cropFileName:'',
	  };
  },
  methods:{
	  beforeUpload(item){
		  const fileName = item.name;
		  const fileType = fileName.substring(fileName.lastIndexOf('.')+1);
		  if(this.cropsize !== "" && this.cropsize !== undefined && ["jpg","jpeg","png","bmp"].includes(fileType)){
			  this.cropDialogStatus = true
			  this.cropFileName = item.name
			  if (window.FileReader) {
				  let reader = new FileReader();
				  reader.readAsDataURL(item)
				  reader.onload = e => {
					  this.imgbase64 = e.target.result
				  }
			  }
			  return false
		  }else{
			  if(this.file_ext){
				  const file_exts = this.file_ext.split(',')
				  if(!file_exts.includes(fileType)){
					  this.$message.error('文件格式错误,不支持'+fileType+'格式')
					  return false
				  }
			  }
			  this.loading = true
		  }
	  },
	  upload(item){
		  let formdata = new FormData()
		  let ali = new FormData()  //此处非常坑 阿里上传file属性必须要放到最后  所以只能赋值对象
		  formdata.append('file', item.file)
		  formdata.append('upload_config_id', this.upload_config_id)
		  formdata.append('rename', this.rename)
		  const config = {
			  onUploadProgress: progressEvent => {
				  if(progressEvent.lengthComputable) {
					  this.progress = true
					  this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2))
				  }
			  }
		  }
		  try {
			  this.$axios.post('/admin/Upload/upload', formdata,config).then(res => {
				  if (res.data.status == 200) {
					  if(res.data.data.filestatus){
						  this.setFilePath(item,res.data.data.data)
					  }else{
						  if(res.data.data.type == 'qiniu'){
							  formdata.append('token',res.data.data.token)
							  formdata.append('key',res.data.data.key)
							  this.$axios.post(res.data.data.serverurl, formdata,config).then(ret => {
								  if(ret.data.key){
									  this.$axios.post('/admin/Upload/createFile',{filepath:res.data.data.domain+'/'+ret.data.key,disk:'qiniu'}).then(result => {
										  this.setFilePath(item,res.data.data.domain+'/'+ret.data.key)
									  })
								  }
							  })
						  }else if(res.data.data.type == 'tencent'){
							  let vm = this
							  var cos = new COS({
								  SecretId: res.data.data.SecretId,
								  SecretKey: res.data.data.SecretKey
							  });
							  cos.putObject({
								  Bucket: res.data.data.Bucket, // 桶名-APPID  必须
								  Region: res.data.data.Region, //区域 必须
								  Schema: res.data.data.Schema, //区域 必须
								  Key: res.data.data.key, //文件名必须 
								  Body: item.file, // 上传文件对象
								  onProgress: function (progressData) {
								  }
							  }, function (err, data) {
								  if(data.Location){
									  const url = res.data.data.Schema+'://'+data.Location
									  vm.$axios.post('/admin/Upload/createFile',{filepath:url,disk:'tencent'}).then(result => {
										  vm.setFilePath(item,url)
									  })
								  }
							  })
						  }else if(res.data.data.type == 'ali'){
							  ali.append('Signature',res.data.data.sign)
							  ali.append('callback',res.data.data.callback)
							  ali.append('OSSAccessKeyId',res.data.data.OSSAccessKeyId)
							  ali.append('policy',res.data.data.policy)
							  ali.append('key',res.data.data.key)
							  ali.append('file', item.file)
							  this.$axios.post(res.data.data.serverurl, ali,config).then(ret => {
								  if(ret.data.code == 1){
									  this.$axios.post('/admin/Upload/createFile',{filepath:ret.data.data,disk:'ali'}).then(result => {
										  this.setFilePath(item,ret.data.data)
									  })
								  }
							  })
						  }else{
							  this.setFilePath(item,res.data.data)
						  }
					  }
				  }else{
					  this.$message.error(res.data.msg)
				  }
			  })
		  }catch (error) {
			  this.$message.error('上传失败')
		  }finally {
			  this.loading = false
			  this.$refs.upload && this.$refs.upload.clearFiles()
		  }
	  },
	  setFilePath(item,filepath){
		  this.progressPercent = 0
		  this.progress = false
		  if(this.file_type == 'images'){
			  this.imageList.push({url: filepath,name:item.file.name})
			  this.$emit('update:images',this.imageList)
		  }else if(this.file_type == 'image'){
			  this.siglepic = filepath
			  this.$emit('update:image',filepath)
		  }else if(this.file_type == 'files'){
			  this.fileList.push({url: filepath,name:item.file.name})
			  this.$emit('update:files',this.fileList)
		  }else{
			  this.sigleFile = filepath
			  this.$emit('update:file',filepath)
		  }
	  },
	  handleRemove(type,index,file) {
		  this.$confirm('是否删除文件?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
		  }).then(() => {
			  if(type == 'image'){
				  this.siglepic = ''
				  this.$emit('update:image','')
			  }else if(type == 'images'){
				  this.imageList.splice(index, 1)
				  this.$emit('update:images',this.imageList)
			  }else if(type == 'file'){
				  this.sigleFile = ''
				  this.$emit('update:file','')
			  }else{
				  this.fileList.splice(index, 1)
				  this.$emit('update:files',this.fileList)
			  }
			  if(file){
				  this.deleteFile(file)
			  }
		  }).catch(() => {})
	  },
	  handlePictureCardPreview(i){
		  this.showtitle = !this.showtitle
	  },
	  deleteFile(val){
		  this.$axios.post('/admin/Base/deleteFile', {filepath:[val]})
	  },
	  openImagesPick(){
		  this.imagesDialogStatus = true
	  },
	  changeSort(){
		  this.$emit('update:images',this.imageList)
	  },
	  crop(){
		  this.cropDialogStatus = true
	  },
	  remoteFile(event){
		  const clipboardData = window.clipboardData || event.clipboardData || event.originalEvent.clipboardData;
		  const items = clipboardData.items;
		  for (let i = 0; i < items.length; i++){
			  if(items[i].getAsFile()){
				  let files = {file: null}
				  files.file = items[i].getAsFile()
				  this.upload(files)
			  }
		  }
	  }
  }
	  
	}
  </script>
  
  <style  lang="scss">
  .upload-demo{display: inline-block; margin-right: 5px;}
  .el-upload--picture-card {width:100px; height: 100px; line-height: 100px;}
  .el-upload-list--picture-card .el-upload-list__item {width:100px; height: 100px; }
  .el-upload-list__item-name{padding-left: 0;}
  .el-upload-list__item{line-height: 1.1;}
  .image-list, .image-item {
	.image-wrap {
	  position: relative;
	  display: inline-block;
	  box-sizing: content-box;
	  margin: 0 10px 0 0;
	  vertical-align: top;
	  &:hover {
		.icon-wrap {
		  opacity: 1;
		}
	  }
	  .imgStyle img{
		width:100px;
		height: 100px;
		border: 1px solid #d9d9d9;
		border-radius: 6px;
	  }
	  .icon-wrap {
		position: absolute;
		left: 0;
		border-radius: 6px;
		width: 102px;
		height: 102px;
		cursor: default;
		text-align: center;
		line-height: 100px;
		color: #fff;
		opacity: 0;
		font-size: 20px;
		background-color: rgba(0, 0, 0, .7);
		transition: opacity .3s;
		.el-icon-zoom-in {
		  cursor: pointer;
		  margin-right: 8px;
		}
		.el-icon-delete {
		  cursor: pointer;
		}
	  }
	}
  }
  .image-item {
	display: inline-flex;
  }
  .image-uploader {
	display: inline-block;
	.el-upload {
	  border: 1px dashed #d9d9d9;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  width:100px;
	  height:100px;
	  [class^="el-icon"] {
		line-height: 100px;
		font-size: 24px;
		color: #8c939d;
		text-align: center;
	  }
	  &:hover {
		border-color: #409EFF;
	  }
	}
  }
  </style>
  